<style lang="scss" scoped>
.xjw-radio-group {
  margin: 0 -20upx;
  display: flex;
  flex-wrap: wrap;
}
</style>
<template>
  <view class="xjw-radio-group" :style="groupStyle">
    <slot></slot>
  </view>
</template>

<script lang="ts">
import Vue from "vue";

import { Component, Prop } from "vue-property-decorator";
import { addUnit } from "../lib/function";
@Component({
  provide() {
    return {
      group: this,
    };
  },
})
export default class Index extends Vue {
  @Prop({ type: [String, Number, Object] }) value;
  @Prop({ type: String }) itemWidth;
  @Prop({ type: [String, Number], default: 20 }) gap;

  style = {
    width: "auto",
    margin: "",
  };

  get groupStyle() {
    return `margin:0 -${uni.upx2px(Number(this.gap) / 2)}px;`;
  }

  created() {
    const gap = uni.upx2px(Number(this.gap) / 2);
    this.style.width = this.itemWidth ? addUnit(this.itemWidth) : "auto";
    this.style.margin = `${uni.upx2px(this.gap)}px ${gap}px 0`;

    this.$on("childCheckChange", this.change);
  }

  change(value) {
    this.$emit("input", value);
    this.$emit("change", value);
  }
}
</script>
